<template>
 <div>
   <h2>学生姓名是：{{studentName}}</h2>
   <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
  <School :getSchoolName="getSchoolName"  />
  <hr>
  <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） -->
  <!-- <Student v-on:test="getStudentName" @demo="m1" /> -->
  <!-- <Student v-once:test="getStudentName" /> -->

  <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref，可以更灵活ps:等待几秒再绑定事件） -->
  <!-- <Student ref="student" @click="show" /> -->
  <Student ref="student" @click.native="show" />
 </div>
</template>

<script>
// 如果组件不加scoped，组件分别使用相同的类名自定义样式，根据引入先后顺序显示（后引入会覆盖先引入的组件）
import School from './components/School'
import Student from './components/Student'

export default {
  name: "App",
  components: {School, Student},
  data() {
    return {
      studentName: ''
    }
  },
  methods: {
    getSchoolName(name) {
      console.log(`App收到了学校名：`, name)
    },
    // getStudentName(name) {
    //   console.log('App收到了学生名：', name)
    //   this.studentName = name
    // },
    // getStudentName(name, ...params) {
    //   console.log('App收到了学生名：', name)
    // },
    m1() {
      console.log('demo事件被触发了！')
    },
    show() {
      alert(123)
    }
  },
  mounted() {
    // 绑定自定义事件
    // this.$refs.student.$on('test', this.getStudentName)
    // 绑定自定义事件（一次性）只执行一次
    // this.$refs.student.$once('test', this.getStudentName)

    this.$refs.student.$on('test', function(name) { // ()=>
      console.log('App收到了学生名：', name)
      console.log(this) // 这里的this是vc
    })
  }
}
</script>

<style lang="css">
/* 一般不在App组件中添加scoped */
/* webpack 4.46.0 less-loader直接安装报错，最新版本服务webpack5；npm i less-loader@7 less@3*/
</style>
